<template>
    <div class="main">
        <Panel class="panel1" :title="'基本信息'">
            <div class="item" v-for="(item, index) in basicList" :key="index">
                <div class="icon" :style="{ backgroundImage: `url('${item.img}')` }"></div>
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ resData[item.field] }}</div>
            </div>
        </Panel>
        <Panel class="panel2" :title="'风险等级'">
            <span class="line">{{ resData.riskName }}</span>
        </Panel>
        <Panel class="panel3" :title="'安全度'">
            <span class="line">{{ resData.securityLevelName }}</span>
        </Panel>
    </div>
</template>

<script>
import Panel from "../../../../component/Panel/index";
import { FetchTailingPond } from "../../../../api/index";
import isNil from "ramda/src/isNil";

export default {
    name: "TheLeft",
    components: {
        Panel,
    },
    props: {
        reciveId: {
            // type: ,
        },
    },
    data() {
        return {
            basicList: [
                {
                    label: "尾矿库名称",
                    value: "二级",
                    img: require("../../../../../../../static/images/ui/111(3).png"),
                    field: "tailingName",
                },
                {
                    label: "尾矿库类型",
                    value: "上游法",
                    img: require("../../../../../../../static/images/ui/111(5).png"),
                    field: "tailingTypeName",
                },
                {
                    label: "尾矿库设计等级",
                    img: require("../../../../../../../static/images/ui/等级.png"),
                    field: "designLevelName",
                },
                {
                    label: "尾矿库现状等级",
                    img: require("../../../../../../../static/images/ui/等级(1).png"),
                    field: "actualLevelName",
                },
            ],
            resData: {},
        };
    },
    watch: {
        reciveId: {
            immediate: true,
            handler: "FetchApiData",
            // default() {
            //     return 1;
            // },
        },
    },
    methods: {
        FetchApiData() {
            if (isNil(this.reciveId)) {
                return;
            }
            // console.log(this.reciveId);

            FetchTailingPond({ id: this.reciveId }).then((res) => {
                // console.log(res);
                this.resData = res;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    line-height: 35px;
    font-size: 16px;
    color: white;
    width: 100%;
    // width: 300px;

    //  div:nth-child(1) {
    //     margin-bottom: 30px;
    //   }
    > div:nth-child(1) {
        // border: 1px solid red;
        margin-bottom: 60px;
    }
    //   }
    > div:nth-child(2) {
        // border: 1px solid red;
        margin-bottom: 30px;
    }
    .item {
        height: 40px;
        margin-top: 20px;
        // border: 1px solid red;
        position: relative;
        .icon {
            width: 28px;
            height: 26px;

            // border: 1px solid red;
            position: absolute;
            top: 15px;
            background-position: left top;
            background-size: 100% 100%;
        }

        .label {
            font-size: 14px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 200;
            opacity: 0.7;
            color: #ffffff;
            line-height: 31px;
            position: absolute;
            left: 35px;
        }

        .value {
            font-size: 18px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #ffffff;
            line-height: 35px;
            position: absolute;
            top: 21px;
            left: 35px;
            white-space: nowrap;
        }
    }

    .line {
        font-size: 26px;
        font-family: PangMenZhengDao;
        color: #3fd3e8;
        line-height: 30px;
        position: absolute;
        top: 8px;
        left: 185px;
    }
}
</style>
